<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/view.css}"/>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>用户修改密码</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header">用户手机号码</div>
            <form id="userForm" class="layui-form layui-card-body">
                <input type="hidden" name="id" th:value="${user.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label">原手机号</label>
                    <div class="layui-input-block">
                        <input type="text" id="oldtell" th:value="${user.tell}" th:readonly="true" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tell" id="newtell" required lay-verify="newtell" placeholder="新手机号"
                               autocomplete="off" class="layui-input">
                        <input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)"/>
                        <input type="text" value=" " style="display: none" id="messagecheck" name="messagecheck"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yzm" required lay-verify="yzm" placeholder="请输入验证码" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" class="layui-btn layui-btn-blue" lay-submit lay-filter="save"
                               th:value="保存"></input>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/css/layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<!--点击获取验证码 s-->
<script type="text/javascript">
    var clock = '';
    var nums = 30;
    var btn;
    var checkednum=Math.ceil(Math.random()*8999+1000);
    var codee=encodeURIComponent('#code#='+checkednum);
    console.log(codee)
    function sendCode(thisBtn) {
        var newtell=document.getElementById("newtell").value;

        console.log(newtell)


        /*axios.post('access-control-allow-origin:http://v.juhe.cn/sms/send',fd).then(function(res){
               console.log(res)
            })*/
        $.ajax({
            type: 'get',
            url: "http://v.juhe.cn/sms/send?mobile="+newtell+"&tpl_id=112085&tpl_value="+codee+"&dtype=&key=44548a4e960388c0359f2d705dae9876",
            dataType:'jsonp',
            processData: false,
           /* data: {
                "mobile":oldtell,
                "tpl_id":112085,
                "tpl_value":'%23code%23%3d123456',
                "dtype":'',
                "key":'44548a4e960388c0359f2d705dae9876'
            },*/

            success: function(data){
               // alert('成功');


            }
        });

        console.log(checkednum);
        document.getElementById("messagecheck").value=checkednum;
        btn = thisBtn;
        btn.disabled = true; //将按钮置为不可点击
        btn.value = nums + '秒后可重新获取';
        clock = setInterval(doLoop, 1000); //一秒执行一次
    }

    function doLoop() {
        nums--;
        if (nums > 0) {
            btn.value = nums + '秒后可重新获取';
        } else {
            clearInterval(clock); //清除js定时器
            btn.disabled = false;
            btn.value = '点击发送验证码';
            nums = 10; //重置时间
        }
    }
</script>
<!--点击获取验证码 e-->

<!--验证 s-->
<script th:inline="javascript">
    /*<![CDATA[*/
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    var userId = [[${user.id}]];
    /*]]>*/
</script>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form
            , layer = layui.layer;

        //添加验证规则
        form.verify({
            newtell: function (value, item) {
                if (!new RegExp("^[\\S]{11}$").test(value)) {
                    return "请输入11位手机号";
                }
            },
            yzm: function (value, item) {
                var yzmm = $('input[name=messagecheck]').val();
                if (yzmm !== value)
                    return "验证码不正确";
            }
        });

        //监听提交
        form.on('submit(save)', function (data) {
            var data = $("#userForm").serialize();
            $.ajax({
                url: contextPath + "/userCenter/modifymobelSubmit",
                type: "post",
                data: data,
                success: function (msg) {
                    layer.msg("修改成功，请重新登录", {
                        time: 1000
                        ,end:function(){
                            parent.location.href='/cms/login';
                        }
                    });
                        //window.location.href("cfgj/login.html");
                        /*function () {
                        //关闭当前弹出层
                       /!* var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);*!/

                    }*/
                }
            });
        })
    });

</script>
<!--验证 s-->
</body>
</html>